<!--<template>-->
<!--  <div class="login-container">-->
<!--    <h2 class="login-title">登录</h2>-->
<!--    <form @submit.prevent="handleLogin">-->
<!--      <div class="form-group">-->
<!--        <label for="username">用户名</label>-->
<!--        <input type="text" id="username" v-model="LoginDTO.name" required>-->
<!--      </div>-->
<!--      <div class="form-group">-->
<!--        <label for="password">密码</label>-->
<!--        <input type="password" id="password" v-model="LoginDTO.pwd" required>-->
<!--      </div>-->
<!--      <div class="button-container"> &lt;!&ndash; 添加按钮容器 &ndash;&gt;-->
<!--        <button type="submit" class="btn">登录</button>-->
<!--      </div>-->
<!--      <p class="register-link">-->
<!--        没有账号？<router-link to="/register" class="register-link-text">立即注册</router-link>-->
<!--      </p>-->
<!--    </form>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->

<!--import {reactive, ref} from "vue";-->
<!--import router from "@/router";-->
<!--import {Login} from "@/api";-->
<!--import {useStore} from "vuex";-->
<!--export default {-->
<!--  setup() {-->
<!--    const LoginDTO = reactive({-->
<!--      name: '',-->
<!--      pwd: ''-->
<!--    });-->
<!--    const isSubmitting = ref(false);-->
<!--    const errorMessage = ref('');-->
<!--    const store = useStore();-->

<!--    const handleLogin = async () => {-->
<!--      // 简单的前端校验-->
<!--      if (!LoginDTO.name.trim() || !LoginDTO.pwd.trim()) {-->
<!--        errorMessage.value = '用户名和密码不能为空';-->
<!--        return;-->
<!--      }-->

<!--      isSubmitting.value = true;-->
<!--      errorMessage.value = '';-->
<!--      try {-->
<!--        const response = await Login(LoginDTO);-->
<!--        console.log('Login Response:', response); // 添加调试日志-->

<!--        if (response.data.code !== 200) {-->
<!--          console.error('登录失败', response.data.code);-->
<!--          alert(response.data?.data?.errorMsg || response.data?.errorMsg || '未知错误');-->
<!--          isSubmitting.value = false;-->
<!--          return;-->
<!--        }-->

<!--        // 需要存储一下token-->
<!--        const token = response.data.data.token;-->
<!--        if (token) {-->
<!--          localStorage.setItem('token', response.data.data.token);-->
<!--          localStorage.setItem('type', response.data.data.type);-->
<!--          localStorage.setItem('username', response.data.data.userName);-->
<!--          localStorage.setItem('userId', response.data.data.userId);-->
<!--          console.log('username:', response.data.data.userName);-->
<!--        } else {-->
<!--          alert('token格式不规范');-->
<!--        }-->

<!--        // 处理登录成功，例如跳转到主页-->
<!--        console.log('登录成功', response);-->
<!--        console.log('response.data.data.type:', response.data.data.type);-->
<!--        console.log('开始跳转');-->
<!--        await store.dispatch('login', {username: LoginDTO.userName});-->
<!--        if (response.data.data.type === 0){-->
<!--          await router.push("/manage/user");-->
<!--          console.log('管理员跳转完成');-->
<!--        }else{-->
<!--          await router.push("/tasteHome");-->
<!--          console.log('跳转完成');-->
<!--        }-->


<!--        // 重定向到应用的主页或其他页面-->
<!--      } catch (error) {-->
<!--        console.error('Login API Error:', error);-->
<!--        errorMessage.value = '请求失败，请稍后再试';-->
<!--        isSubmitting.value = false;-->
<!--      }-->
<!--    };-->

<!--    return {-->
<!--      LoginDTO,-->
<!--      isSubmitting,-->
<!--      errorMessage,-->
<!--      handleLogin-->
<!--    };-->
<!--  }-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->
<!--.login-container {-->
<!--  max-width: 400px;-->
<!--  margin: 30px auto; /* 修改：进一步减少容器的上下外边距 */-->
<!--  padding: 20px; /* 修改：进一步减少容器的内边距 */-->
<!--  background: linear-gradient(135deg, #f9f9f9, #e3e3e3);-->
<!--  border-radius: 16px;-->
<!--  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);-->
<!--  border: 1px solid #ddd;-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  align-items: center;-->
<!--}-->

<!--.login-title {-->
<!--  text-align: center;-->
<!--  color: #007bff;-->
<!--  margin-bottom: 20px; /* 修改：进一步减少标题的下外边距 */-->
<!--  font-size: 32px;-->
<!--  font-weight: bold;-->
<!--}-->

<!--.form-group {-->
<!--  width: 100%;-->
<!--  margin-bottom: 15px; /* 修改：进一步减少表单项的下外边距 */-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--}-->

<!--.form-group label {-->
<!--  margin-right: -5px; /* 修改：进一步减少标签与输入框之间的间距 */-->
<!--  color: #333;-->
<!--  font-weight: 500;-->
<!--  flex-shrink: 0;-->
<!--  width: 80px;-->
<!--}-->

<!--.form-group input {-->
<!--  flex-grow: 1;-->
<!--  padding: 12px; /* 修改：进一步减少输入框的内边距 */-->
<!--  border: 1px solid #ccc;-->
<!--  border-radius: 8px;-->
<!--  transition: border-color 0.3s ease;-->
<!--  font-size: 16px;-->
<!--  width: 100%;-->
<!--}-->

<!--.button-container {-->
<!--  width: 100%;-->
<!--  display: flex;-->
<!--  justify-content: center;-->
<!--  margin-bottom: 15px; /* 修改：进一步减少按钮容器的下外边距 */-->
<!--}-->

<!--.btn {-->
<!--  width: 50%;-->
<!--  max-width: 200px;-->
<!--  padding: 8px; /* 修改：进一步减少按钮的内边距 */-->
<!--  background-color: #007bff;-->
<!--  color: #fff;-->
<!--  border: none;-->
<!--  border-radius: 8px;-->
<!--  cursor: pointer;-->
<!--  transition: background-color 0.3s ease;-->
<!--  font-size: 14px;-->
<!--  font-weight: 500;-->
<!--}-->

<!--.register-link {-->
<!--  text-align: center;-->
<!--  margin-top: 15px; /* 修改：进一步减少链接的上外边距 */-->
<!--  font-size: 14px;-->
<!--}-->

<!--.register-link-text {-->
<!--  color: #007bff;-->
<!--  text-decoration: none;-->
<!--  transition: color 0.3s ease;-->
<!--}-->

<!--.register-link-text:hover {-->
<!--  text-decoration: underline;-->
<!--  color: #0056b3;-->
<!--}-->

<!--.register-link-text:active,-->
<!--.register-link-text:focus {-->
<!--  color: #007bff; /* 确保点击时字体颜色不变 */-->
<!--}-->

<!--@media (max-width: 576px) {-->
<!--  .login-container {-->
<!--    padding: 15px; /* 修改：进一步减少小屏幕上的内边距 */-->
<!--  }-->

<!--  .login-title {-->
<!--    font-size: 28px;-->
<!--  }-->

<!--  .form-group label {-->
<!--    width: 70px;-->
<!--  }-->

<!--  .form-group input {-->
<!--    padding: 10px; /* 修改：进一步减少小屏幕上的输入框内边距 */-->
<!--  }-->

<!--  .btn {-->
<!--    width: 80%;-->
<!--    max-width: 200px;-->
<!--    padding: 8px; /* 修改：进一步减少小屏幕上的按钮内边距 */-->
<!--    font-size: 14px;-->
<!--  }-->

<!--  .register-link {-->
<!--    font-size: 12px;-->
<!--  }-->
<!--}-->
<!--</style>-->
